import {
  action,
  computed,
  //   makeAutoObservable,
  makeObservable,
  observable,
  runInAction,
} from "mobx";

// mobx通过一个class来管理state;
class DoctorStore {
  // ed7 ,定义实例化对象的属性, 就是初始化state.
  doctorList = [];
  count = 0;
  userInfo = { uid: 1, uname: "张3", usex: "男" };
  a = 1;
  b = 2;

  constructor() {
    // 自动进行断言，识别类里面的属性和方法，它们时要跟踪的状态、计算属性、actions.
    // makeAutoObservable();
    makeObservable(this, {
      doctorList: observable, // observable: 要被跟踪的state;
      count: observable,
      userInfo: observable,
      increment: action.bound, // 表示这是一个actions函数， .bound,可以理解未修改类里面的函数的this的指向，让this指向实例化对象
      changeDoctors: action.bound,
      changeUserInfo: action.bound,
      getDoctors: action.bound,
      getUserName: computed, // 计算属性，自动监听state的改变，返回新的数据。自动渲染页面
    });
    // 监听器：when, reactionk, autorun
  }
  //   计算属性: 使用关键字 get 来表示这是一个计算属性。
  get getUserName() {
    return (
      this.userInfo.uname +
      "," +
      (this.userInfo.usex === "男" ? "帅哥" : "美女")
    );
  }

  //同步的 actions 方法：没有使用get关键字，你去操作 state，那么这个方法就是一个actions.
  increment() {
    this.count = this.count + 1;
  }
  //   异步的actions:
  getDoctors() {
    fetch("http://127.0.0.1:80/doctor/noteamall", { method: "get" })
      .then((res) => res.json())
      .then((res) => {
        if (res.code === 0) {
          // 在异步的actions里面，更新state;
          //   使用这个工具函数来创建一个会被立即调用的临时 action。在异步进程中非常有用。参数就是临时 action函数
          runInAction(() => {
            this.doctorList = res.data;
          });
        } else {
        }
      })
      .catch((err) => {});
  }
  //   同步的actions: 在组件里面调用接口后，判断成功调用接口后，在调用同步的actions.
  changeDoctors(list) {
    this.doctorList = list;
  }
  //   同步的actions:
  changeUserInfo(obj) {
    this.userInfo = obj;
  }
}

let store = new DoctorStore();

export default store;
